<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //在移动端click会有300ms的延时，原因是移动端双击会缩放
        //解决方案
        //1. 禁用缩放 。 浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
        //在视图页面写上<meta name="viewport" content="user-scalable=no">

        //2. 利用touch事件封装这个事件解决300ms延迟
        /* 原理：1.当我们手指触摸屏幕，记录当前触摸时间
                 2. 当我们手指离开屏幕，用离开的时间减去触摸的时间
                 3. 如果时间小于150ms，并且没有滑动过屏幕，则定义为点击*/
        function top (obj , callback){
            var isMove = false;
            var startTime = 0; //记录触摸的时间变量
            obj.addEventListener('touchstart',function(e){
                startTime = Date.now();//记录触摸时间
            });
            obj.addEventListener('touchmove',function(e){
                isMove = true;//看看是否有滑动
            });
            obj.addEventListener('touchend',function(e){
                if(!isMove&& (Date.now() - startTime )< 150){//如果触摸时间小于150算点击
                    callback && callback(); //执行回调函数
                }
                isMove = false ; //取反  重置
                startTime = 0;
            });
        }
        //调用 
        top(div,function(){
            //执行代码
        })

        //3.使用插件 fastclick 插件解决300ms延迟
        //插件地址： https://github.com/ftlabs/fastclick
        // 使用方法 调用插件,再在script里面添上如下代码
        if ('addEventListener' in document) {
	        document.addEventListener('DOMContentLoaded', function() {
		    FastClick.attach(document.body);
	        }, false);
        }
    </script>
</body>
</html>